<template>
  <div style="position: relative;" @mouseover="mouseOver" @mouseleave="mouseLeave">
    <el-image :src="url" :preview-src-list="[url]"  />
    <i v-if="type !== 'info'" v-show="disabled" class="el-icon-delete icon" @mouseover="mouseOver"
      @click="handleRemove(index)" />
  </div>
</template>

<script>
export default {
  name: 'Pictures',
  props: {
    url: {
      type: String,
      default: () => {
        return ''
      }
    },
    index: {
      type: Number,
      default: () => {
        return null
      }
    },
    type: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    mouseOver() {
      this.disabled = true
    },

    mouseLeave() {
      this.disabled = false
    },

    handleRemove(file) {
      this.$emit('deletefile', file)
      this.disabled = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.el-image {
  text-align: center;
  width: 243px;
  height: 178px;

  .el-image__inner {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

::v-deep .icon {
  position: absolute;
  top: 6%;
  right: 2%;
  transform: translate(-50%, -50%);
  color: #1890ff;
  cursor: pointer;
  font-size: 20px;
}
</style>
